<template>

    <div class="bu2">作物分布</div>
    <div class="bu3">作物估产</div>
    <div class="bu4">长势评价</div>


</template>
<script>

</script>
<style>
.bu2:hover
{
  color: #ffffff;
  border-bottom: rgba(76,173,255,0.7) 2px solid;
  border-top: rgba(76,173,255,0.7) 2px solid;
}
.bu3:hover
{
  color: #ffffff;
  border-bottom: rgba(76,173,255,0.7) 2px solid;
  border-top: rgba(76,173,255,0.7) 2px solid;
}
 .bu4:hover
 {
   color: #ffffff;
   border-bottom: rgba(76,173,255,0.7) 2px solid;
   border-top: rgba(76,173,255,0.7) 2px solid;
 }

.bu2{
  z-index: 100000;
  width: 7%;
  height: 30px;
  font-weight: bold;
  position: fixed;
  bottom: 90px;
  left: 36%;
  color: #a2d5ff;
  font-size: 12px;
  background-image: url(@/assets/img/button.png);
  background-size: 100% 100%;
  line-height: 28px;
  text-align: center;
}
.bu3 {
  z-index: 100000;
  width: 7%;
  height: 30px;
  position: fixed;
  bottom: 90px;
  left: 46%;
  font-size: 12px;
  font-weight: bold;
  color: #a2d5ff;
  background-image: url(@/assets/img/button.png);
  background-size: 100% 100%;
  line-height: 28px;
  text-align: center;
}
.bu4 {
  z-index: 100000;
  width: 7%;
  height: 30px;
  position: fixed;
  bottom: 90px;
  left: 56%;
  font-size: 12px;
  font-weight: bold;
  color: #a2d5ff;
  background-image: url(@/assets/img/button.png);
  background-size: 100% 100%;
  line-height: 28px;
  text-align: center;
}
</style>